<template>
  <div>
      <div class="box"> 
<ul class="">
      <li
        v-for="(item,i) in xiao_lunbo"
        :key="item.index"
        :style="{ zIndex: index == i ? 9 : -1 }"
      >
        <img :src="item.img_url" alt="" />
      </li>
    </ul>
      </div>
    
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      time: null,
    };
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  mounted() {
    this.time = setInterval(() => {
      //如果index++的值已经等于大于swiper的长度赋值为0
      if (this.index >= this.xiao_lunbo.length-1) {
        this.index = 0;
      } else {
        this.index++;
      }
    }, 1500);
  },
  props: {
    xiao_lunbo: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="scss" scoped>

    ul {
  list-style: none;
  position: relative;
  margin-top: 10px;
  width: 355px;
    height: 93px;
  li {
    position: absolute;
    top: 0;
    left: 0;
   border-radius: 15px;
    img {
      width: 355px;
      height: 93px;
         border-radius: 15px;
    }
  
}
}


</style>
